﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body { font-size: 14px; }
        .tab-control { width: 800px; }
        .tab-control > .hd > ul { padding: 0; margin: 0; height: 30px; line-height: 30px; }
        .tab-control > .hd > ul > li { display: inline-block; margin: 0 5px 0 0; padding: 0; list-style: none; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; }
        .tab-control > .hd > ul > li > a { color: #666; display: block; width: 80px; text-align: center; text-decoration: none; background: #eee; }
        .tab-control > .hd > ul > li.on > a { background: #0094ff; color: #fff; }
        .tab-control > .bd > div { border: solid 2px #0094ff; display: none; height: 120px; padding: 15px; }
        .tab-control > .bd > div.on { display: block; }
    </style>
</head>
<body>
    <h1>简单的选项卡案例 2</h1>
    <div class="tab-control">
        <div class="hd">
            <ul></ul>
        </div>
        <div class="bd">
            <div tc-title="选项卡1">内容1</div>
            <div tc-title="选项卡2">内容2</div>
            <div class="on" tc-title="选项卡4">内容4</div>
            <div tc-title="选项卡5">内容5</div>
            <div tc-title="选项卡7">内容7</div>
            <div tc-title="选项卡8">内容8</div>
            <div tc-title="选项卡10">内容10</div>
        </div>
    </div>
    <script>
        // 用 document.querySelector 获取 ul 标签（选项卡头部）
        var tabHeadContainer = document.querySelector('.hd>ul');
        // 用 document.querySelector 获取 db 标签内的所有 DIV 元素
        var tabBodys = document.querySelectorAll('.bd>div');

        // 使用 for 循环处理 db 所有元素
        for (var i = 0; i < tabBodys.length; i++) {
            // 使用 Element.getAttribute 返回标签的指定名称属性 注：Element.setAttribute(name,value) 是设定标签的属性
            var title = tabBodys[i].getAttribute('tc-title');

            // 分别创建 li 标签及 a 标签
            var eleLi = document.createElement('li'); // <li>选项卡1</li> 创建出来 内存
            var eleA = document.createElement('a');

            // 将 a 标签添加到 eleLi 标签
            eleLi.appendChild(eleA);
            // 将 li 标签添加到选项卡头部
            tabHeadContainer.appendChild(eleLi);

            // 如果选项卡内容标记了 on，则选项卡头的 class 也要标记为 on (class="on"说明为激活的选项卡)
            if (tabBodys[i].className == 'on') {
                eleLi.className = 'on';
            }

            // 设定 a 标签的 href 属性及内部显示的文本
            eleA.href = 'javascript:;';
            eleA.innerText = title;

            // 设定 li 标签的单击事件
            eleLi.onclick = function (e) {
                // 循环处理 tab 头的所有子节点（也就是 ul 内部的li标签）
                for (var j = 0; j < tabHeadContainer.childNodes.length; j++) {
                    // 判断循环到的标签是否为点击的标签
                    if (tabHeadContainer.childNodes[j] == this) {
                        // 如果是，则设定对应的 头部li及内容div的 className="on"
                        tabHeadContainer.childNodes[j].className = 'on';
                        tabBodys[j].className = 'on';
                    } else {
                        // 否则设定对应的 头部li及内容div的 className=""
                        tabHeadContainer.childNodes[j].className = '';
                        tabBodys[j].className = '';
                    }
                }
            }
        }
    </script>
</body>
</html>